<template>
  <div id="app">
    <Category title="美食">
      <!-- 插槽没有name属性则将img，a当成一体放在一个slot中，有了name属性则分别放(img,a中要用slot属性指明放在那个slot中) -->
      <img slot="first" src="./news_logo.png" alt="" />
      <a slot="second" href="javascript:;">更多</a>
    </Category>

    <Category title="游戏">
      <ul slot="second">
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
    </Category>

    <Category title="电影">
      <!-- 多个(不)同名标签放在一个插槽里不会覆盖而是追加 -->
      <a slot="first" href="javascript:;">更多</a
      ><!-- &nbsp;不会放在slot中，只放slot属性所在的标签 -->
      <a slot="first" href="javascript:;">更多</a>

      <template v-slot:second
        ><!-- 只有标签为template时才能这么写，second不用加引号,可简写为#second-->
        <div class="movie">
          <a href="javascript:;">电影</a>
          <a href="javascript:;">电影</a>
          <a href="javascript:;">电影</a>
          <a href="javascript:;">电影</a>
        </div>
        <h4>欢迎</h4>
      </template>
    </Category>
  </div>
</template>
<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
    };
  },
  components: {
    Category,
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
#app {
  display: flex;
  justify-content: space-around;
}
image {
  width: 100%;
}
.movie {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

